<!DOCTYPE html>
<html lang="en">
  <head>
    <title><%= title %></title>

    <%-include("css.ejs")%>
    <link rel="stylesheet" href="stylesheets/font-awesome.css">
    <link rel='stylesheet' href='stylesheets/index.css' />

    <%-include("js.ejs")%>

  </head>
  <body>
    <%-include("nav.ejs")%>

    <div style="margin-top: 50px">
      <div class="introductionBox container text-center">
        <h1>Elegant Task Publishing Platform</h1>

        <p>
          Simple and elegant task release view,
          convenient and efficient task management system,
          safe and stable data guarantee,
          TheTask Management Is An Art In Itself
        </p>

        <small>click it</small>

        <div>
          <b class="fa fa-arrow-down"></b>
        </div>

        <div class="tryNow">
          <a href="/loginRegister">Try it now</a>
        </div>
      </div>

      <div class="taskBox container">
        <div class="lookMore">
          <a href="/userCenter">look more</a>
        </div>

        <div class="row">
          <div class="Task col-4">
            <ul>
              <% for (var i = 1; i <= showTaskNum; i++) { %>
                <li id="<%="look-" + i %>">
                  <b class="fa fa-share"></b>
                  <p>Task <%= i %></p>
                </li>
              <% } %>
            </ul>
          </div>

          <div class="taskImage col-8">
            <ul>
              <% for (var i = 1; i <= showTaskNum; i++) { %>
                <% if (i == 1) { %>
                  <li>
                    <img id="<%="image-" + i%>" class="lookImage" src="<%= "/images/showTaskImage" + i + ".png" %>" alt="task content">
                  </li>
                <% } else { %>
                  <li>
                    <img id="<%="image-" + i%>" class="unlookImage" src="<%= "/images/showTaskImage" + i + ".png" %>" alt="task content">
                  </li>
                <% } %>
              <% } %>
            </ul>
          </div>

        </div>
      </div>
    </div>
  <script>
    /* 渐变切换 */
    <% for (var i = 1; i <= showTaskNum; i++) { %>
      $($("#<%= "look-" + i  %>")).click(
          () => {
              <% for (var j = 1; j <= showTaskNum; j++) { %>
                  $("#<%= "look-" + j %> p").css('color', '#000');
                  $("#<%= "look-" + j %> b").css('color', '#000');

                  $("#<%= "image-" + j %>").css('z-index', '0');
                  $("#<%= "image-" + j %>").css('opacity', '0');
              <% } %>

              $("#<%= "look-" + i %> p").css('color', '#7D74FF');
              $("#<%= "look-" + i %> b").css('color', '#7D74FF');

              $("#<%= "image-" + i %>").css('z-index', '1');
              $("#<%= "image-" + i %>").css('opacity', '1');
          }
      );
    <% } %>
  </script>
  </body>
</html>